<template>
  <div>
    <header>热门城市</header>
    <div class="hot" v-if="hotList">
      <div
        v-for="val in hotList.cities"
        :key="val.cityId"
        class="hot-city-item"
        @click="chooseCity(val)"
      >
        {{ val.name }}
      </div>
    </div>

    <div v-for="item in otherList" :key="item.prefix" class="wrap">
      <header>
        {{ item.prefix.toUpperCase() }}
      </header>
      <div
        v-for="val in item.cities"
        :key="val.cityId"
        class="city-item"
        @click="chooseCity(val)"
      >
        {{ val.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
  mounted() {
    this.getCityListAsync();
  },
  computed: mapGetters(["hotList", "otherList"]),
  methods: {
    chooseCity(city) {
      this.changeCity(city);
      this.$router.go(-1);
    },
    ...mapMutations(["changeCity"]),
    ...mapActions(["getCityListAsync"]),
  },
};
</script>

<style lang="less" scoped>
header {
  padding-left: 25px;
  font-size: 14px;
  color: #333;
  background-color: rgb(235, 235, 235);
  font-size: 18px;
  line-height: 30px;
}

.hot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .hot-city-item {
    width: calc(33% - 20px);
    height: 30px;
    border: 1px solid #333;
    margin: 10px;
  }
}

.city-item {
  height: 44px;
  line-height: 44px;
  margin-left: 15px;
  border-bottom: 1px solid #c8c7cc;

  &:last-child {
    border-bottom: none;
  }
}
</style>
